<template>
  <el-card class="login-card">
      <h2>登录</h2>
      <el-form :model="loginForm" ref="loginForm" :rules="rules">
          <el-form-item prop="userName">
              <el-input v-model="loginForm.userName" name="username" auto-complete="on" placeholder="用户名"></el-input>
          </el-form-item>

          <el-form-item prop="password">
              <el-input v-model="loginForm.password" name="password" auto-complete="on" placeholder="Password" show-password></el-input>
          </el-form-item>

          <el-form-item>
                    <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
          </el-form-item>
      </el-form>

  </el-card>
</template>

<script>
import { Form } from 'element-ui'
import {userLogin } from '../api/admin.js'
import { setCookie } from '../utils/cookie.js'
export default {
    name: 'Login',
    props: {
        query: {
            type: Object,
            default(){
                return {}
            }
        }
    },
    data() {
        return {
            loginForm: {
                userName: '',
                password: '',
            },
            rules: {
                userName: [
                    {
                        require: true, message: '请输入用户名', trigger: 'blur'
                    }
                ],
                password: [
                    {
                        require: true, message: '请输入密码', trigger: 'blur'
                    }
                ]
            }
        }
    },
    components: {
        
    },
    methods: {
        submitForm:function(formName){
            let that = this
            this.$refs[formName].validate((valid) => {
                if(valid){
                    that.query.userName = this.loginForm.userName
                    that.query.password = this.loginForm.password
                    // console.log("类型",typeof that.query)
                    userLogin(that.query).then(res => {
                        // var result = res.result
                        if(res.code == 200){
                            console.log(res.message)
                            // setCookie('roles', res.result)
                            setCookie('roles', res.loginInfo.role)
                            localStorage.setItem("userName", this.loginForm.userName)
                            localStorage.setItem("roles", res.loginInfo.role)  // 设置路径访问权限
                            // localStorage.setItem("permissions", "SUCCESS")
                            this.$router.push({path: '/'}); // 跳转路由
                        }else{
                            console.log(res.message)
                        }
                    })
                }
            })
        }
    }
}
</script>

<style scoped>
.el-card {
    width: 25%;
    height: 40%;
    padding: 20px;
    text-align: center;
}
.el-form button {
    display: block;
    width: 100%;
}
.el-form-item {
    margin: 30px 0;
}
</style>